<template>
    <div class="box">
        <div class="wen">
            <h1>在线教育管理系统</h1>
            <div class="tab">
                <!-- 表单判空验证 -->
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="用户名" prop="name" class="wens">
                        <el-input v-model="ruleForm.name" class="ipts"></el-input>
                    </el-form-item>

                    <el-form-item label="邮箱" prop="email" class="wens">
                        <el-input v-model="ruleForm.email" class="ipts"></el-input>
                    </el-form-item>

                    <el-form-item label="密码" prop="password" class="wens">
                        <el-input v-model="ruleForm.password" class="ipts"></el-input>
                    </el-form-item>

                    <el-form-item label="确认密码" prop="password2" class="wens">
                        <el-input v-model="ruleForm.password2" class="ipts"></el-input>
                    </el-form-item>

                    <el-form-item label="身份" prop="identity" class="wens">
                        <el-select v-model="ruleForm.identity" placeholder="请选择身份" class="ipts">
                            <el-option label="管理员" value="管理员"></el-option>
                            <el-option label="普通员工" value="普通员工"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
                    </el-form-item>
                </el-form>
            </div>

        </div>
    </div>
</template>
<script>
import { enroll } from '@/request/api';
export default {
    data() {
        return {
            ruleForm: {
                name: '',
                email: '',
                password: '',
                password2: '',
                identity: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输用户名', trigger: 'blur' },
                    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                password: [
                    { required: true, message: '请设置您的登录密码', trigger: 'blur' },
                    { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
                ],
                password2: [
                    { required: true, message: '请确定您的密码并保持一致', trigger: 'blur' },
                    { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
                ],
                identity: [
                    { required: true, message: '请选身份', trigger: 'change' }
                ],
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('通过!');
                    enroll(this.ruleForm).then(res => {
                        console.log(res);
                        console.log(this.ruleForm);
                        this.$message({
                            message: '恭喜你注册成功',
                            type: 'success'
                        });
                        this.$router.go(-1)
                    }).catch(err => {
                        this.$message.error('抱歉注册失败！');
                        console.log(err);
                    })

                } else {
                    console.log('注册有涡!!');
                    return false;
                }
            });
        }
    },
}
</script>
<style lang="scss">
.ipts .el-input__inner {
    height: 50px;
}

.el-button {
    width: 100%;
}

.wens .el-form-item__label {
    color: #fff;
    font-size: 18px;
}

.box {
    width: 100%;
    height: 100vh;
    background-color: #2d3a4b;
    display: flex;

    .wen {
        .tab {
            margin-top: 50px;
            margin-right: 40px;
        }

        h1 {
            color: #fff;
            text-align: center;
        }

        width: 650px;
        height: 500px;
        background-color: #2d3a4b;
        margin: auto;
        justify-content: center;
    }
}
</style>